import './index.scss';
import { Table, Space,Button } from 'antd';
import React, { useState,Navigate } from 'react';

const AuthorTable=()=>{
    const [selectionType, setSelectionType] = useState('checkbox');
    const columns = [
        {
            title: '编号',//表格列名
            dataIndex: 'id',//对应数据字段
            key: 'id',//该列的唯一值
        },
        {
            title: '头像',
            dataIndex: 'picture',
            key: 'picture',
            render:(record)=>{
                // console.log(record);
                return <img src={record} width="30px" alt=""/>
            }
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '状态',
            key: 'status',
            render: (text) =>{
                // console.log(text.type)
                return <span>{text.status}</span>
            }
        },
        
        {
            title: '录入时间',
            dataIndex: 'createtime',
            key: 'createtime',
        },
        {
            title: '操作',
            render:(_,record)=>(
                <Button type={"link"}>编辑</Button>   
            )

        },
    ];
    const data=[
        {
            id:1,
            picture:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Ffe%2F11%2F97%2Ffe119792285b42e687ebf4367f77c8de.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667467708&t=f250a0a76a390e652a8e7d302b64f987',
            name:'史铁生',
            status:'正常',
            createtime:'2022-06-01 14:45:00'
        },
        {
            id:2,
            picture:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Ffe%2F11%2F97%2Ffe119792285b42e687ebf4367f77c8de.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667467708&t=f250a0a76a390e652a8e7d302b64f987',
            name:'余华',
            status:'冻结',
            createtime:'2022-06-26 10:21:49'
        },
        {
            id:3,
            picture:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Ffe%2F11%2F97%2Ffe119792285b42e687ebf4367f77c8de.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667467708&t=f250a0a76a390e652a8e7d302b64f987',
            name:'莫言',
            status:'正常',
            createtime:'2022-07-21 08:25:00'
        },
        {
            id:4,
            picture:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Ffe%2F11%2F97%2Ffe119792285b42e687ebf4367f77c8de.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667467708&t=f250a0a76a390e652a8e7d302b64f987',
            name:'张三',
            status:'冻结',
            createtime:'2022-08-01 12:45:37'
        },
        {
            id:5,
            picture:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Ffe%2F11%2F97%2Ffe119792285b42e687ebf4367f77c8de.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667467708&t=f250a0a76a390e652a8e7d302b64f987',
            name:'李雪琴',
            status:'正常',
            createtime:'2022-09-27 19:29:48'
        },
        {
            id:6,
            picture:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Ffe%2F11%2F97%2Ffe119792285b42e687ebf4367f77c8de.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667467708&t=f250a0a76a390e652a8e7d302b64f987',
            name:'饶雪漫',
            status:'冻结',
            createtime:'2022-10-04 09:47:56'
        },

    ]
    return <div className='tableBox'>
        <Table  
            rowSelection={{type: selectionType,}}
            columns={columns} 
            dataSource={data} 
            rowKey={(record) => record.id}  
            pagination={{pageSize:5}}/>
    </div>
}
export default AuthorTable;